<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<title>途经点</title>
		<style>
			html,
			body,
			#container {
				width: 100%;
				height: 100%;
			}

			#panel {
				position: fixed;
				background-color: white;
				max-height: 90%;
				overflow-y: auto;
				top: 10px;
				right: 10px;
				width: 280px;
			}

			#panel .amap-lib-driving {
				border-radius: 4px;
				overflow: hidden;
			}
		</style>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
		<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=2.0&key=0cf0fb0add508513a0724ae478927b71&plugin=AMap.Driving"></script>
		<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>

	</head>
	<body>
		<div id="msg"></div>
		<div id="container"></div>
		<div id="panel"></div>
		<script type="text/javascript">
			function msglog(str) {
				//alert(str)
				var el = document.querySelector('#msg');
				el.innerText = str
			}
			window.msglog = msglog
			var car;
			var map;
			var userAgent = navigator.userAgent;
			try {
				if (userAgent.indexOf('AlipayClient') > -1) {
					// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
					document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
				} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
					// QQ 小程序
					document.write(
						'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
					);
				} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
					// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
					document.write(
						'<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
				} else if (/toutiaomicroapp/i.test(userAgent)) {
					// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
					document.write(
						'<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>'
					);
				} else if (/swan/i.test(userAgent)) {
					// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
					document.write(
						'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
					);
				} else if (/quickapp/i.test(userAgent)) {
					// quickapp
					document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
				}
				if (!/toutiaomicroapp/i.test(userAgent)) {
					const section = document.querySelector('.post-message-section')
					if (section) {
						section.style.visibility = 'visible';
					}

				}

				function updateCarPosition(lng, lat) {
					car.setPosition(new AMap.LngLat(parseFloat(lng), parseFloat(lat))); //更新点标记位置
					map.setCenter(new AMap.LngLat(parseFloat(lng), parseFloat(lat))); //设置地图中心点
				}
				window.updateCarPosition = updateCarPosition;

				function doMap(line) {
					line = JSON.parse(line);
					const points = line.company_points;
					try {
						//基本地图加载
						map = new AMap.Map("container", {
							resizeEnable: true,
							center: [points[0].position[0], points[0].position[1]], //[116.397428, 39.90923], //地图中心点
							zoom: 15 //地图显示的缩放级别
						});

						setTimeout(() => {
							map.setZoom(15)
						}, 2000)

						//构建小车

						car = new AMap.Marker({
							position: [points[0].position[0], points[0].position[1]],
							icon: "http://webapi.amap.com/images/car.png",
							offset: new AMap.Pixel(-26, -13),
							autoRotation: true
						});
						car.setMap(map);

						//构造路线导航类
						var driving = new AMap.Driving({
							map: map,
							// panel: "panel"
						});
						// 根据起终点经纬度规划驾车导航路线

						const waypoints = []
						points.forEach(x => {
							waypoints.push(new AMap.LngLat(x.position[0], x.position[1]))
						})
						const startPoint = waypoints.shift(); //先进后出
						const endPoint = waypoints.pop(); //后进先出
						driving.search(startPoint, endPoint, {
							waypoints
						}, function(status, result) {
							// result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
							if (status === 'complete') {
								log.success('绘制驾车路线完成')
							} else {
								log.error('获取驾车数据失败：' + result)
							}
						})
					} catch (e) {
						msglog(e)
						//TODO handle the exception
					}

				}
				window.doMap = doMap;






				// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
				document.addEventListener('UniAppJSBridgeReady', function() {
					// log.success('222')
					// doMap();

					// log.success('UniAppJSBridgeReady')
					uni.postMessage({
						data: {
							action: 'init'
						}
					});
					uni.getEnv(function(res) {
						console.log('当前环境：' + JSON.stringify(res));
					});


					// document.querySelector('.btn-list').addEventListener('click', function(evt) {
					// 	var target = evt.target;
					// 	if (target.tagName === 'BUTTON') {
					// 		var action = target.getAttribute('data-action');
					// 		switch (action) {
					// 			case 'switchTab':
					// 				uni.switchTab({
					// 					url: '/pages/tabBar/API/API'
					// 				});
					// 				break;
					// 			case 'reLaunch':
					// 				uni.reLaunch({
					// 					url: '/pages/tabBar/component/component'
					// 				});
					// 				break;
					// 			case 'navigateBack':
					// 				uni.navigateBack({
					// 					delta: 1
					// 				});
					// 				break;
					// 			default:
					// 				uni[action]({
					// 					url: '/pages/component/button/button'
					// 				});
					// 				break;
					// 		}
					// 	}
					// });
					// document.getElementById('postMessage').addEventListener('click', function() {
					// 	uni.postMessage({
					// 		data: {
					// 			action: 'message'
					// 		}
					// 	});
					// });
				});
			} catch (e) {
				msglog(e)
				//TODO handle the exception
			}
		</script>
	</body>
</html>
